<template>
	<view class="spec-box">
		<view ><text class="s-tit">{{title}}</text><text>{{titleTxt}}</text></view>
		<view class="l-box">
			<view class="unit-box">
				<view class="unit-item" v-for="(item,index) in tagList" @click="changeTags(item,index)"
					:key = "index" :class="{'active' : item.checked}"> {{item.title}} </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import goodsCtrl from "../../js/project/GoodsCtrl.js";
	import lang from "../../js/conf/Lang.js";
	export default
	{
		data(){
			return{
				title:lang.tagTxt.title,
				titleTxt:lang.tagTxt.titleTxt,
				tagList : [],
			}
		},
		
		methods:
		{
			changeTags(item,index)
			{
				console.log("item=========:",item);
				item = goodsCtrl.changeTag(item,index);
			},
			
			initData()
			{
				this.tagList = [];
				this.tagList = goodsCtrl.getTagList();
			},
		},
	}
</script>

<style lang="scss">
	.spec-box
	{
		font-size: 13px;
		color: #333;
	    padding-top: 20px;
		padding-bottom: 20px;
		.s-tit
		{
			font-weight: bold;
		}
		.l-box
		{
			width: 100%;
			display: flex;
			margin-bottom: 10px;
			.unit-box
			{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.unit-item
				{
					padding: 4px 20px;
					border-radius: 4px;
					margin-right: 10px;
					margin-top: 10px;
					border: 1px solid #3388FF;
					cursor: pointer;
				}
				.active
				{
					background: #38F;
					color: #FFF;
				}
			}
		}
	}
	
	
</style>
